@import  './../../../../style/font';
@import './../../../../style/color';

// 投诉举报、我为食安建言端口页

.complaint-project-page {
    padding: 10px 20px 0  20px;
  .complaint-main-wrap {
    overflow: hidden;

    .complaint-containsLeft{
      float: right;
      width: 500px;
      .complaint-left {
        position: relative;
        height: 453px;
        border: solid 1px #30CA04;
        border-radius: 25px;
        background-color: #FFFFFF;

        .complaint-table{
          padding: 0 15px;
          margin-top: 10px;
          .complaint-body, .complaint-head{
            & > span {
              padding: 13px 0;
              display: inline-block;
              margin-right: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 18px;
              line-height: 18px;
              text-align: center;
            }

            & > span:first-child{
              width: 30%;
            }
            & > span:nth-child(2){
              width: 30%;
            }
            & > span:last-child{
              width: 30%;
            }

          }
          .complaint-body-test{
            & > span{
              padding: 8px 0;
            }
            &:last-child{
              margin-bottom: 10px;
            }
          }
          .complaint-body-double, .complaint-head-double{
            & > span {
              padding: 13px 0;
              display: inline-block;
              margin-right: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 18px;
              line-height: 18px;
              text-align: center;
            }

            & > span:first-child{
              width: 23%;
            }
            & > span:nth-child(2){
              width: 23%;
            }
            & > span:nth-child(2){
              width: 23%;
            }
            & > span:last-child{
              width: 23%;
            }
          }
          .complaint-body-speak, .complaint-head-speak{
            & > span {
              padding: 13px 0;
              display: inline-block;
              margin-right: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 18px;
              line-height: 18px;
              text-align: center;
            }

            & > span:first-child{
              width: 45%;
            }
            & > span:last-child{
              width: 45%;
            }
          }
          .complaint-pagination{
            position: absolute;
            bottom: 10px;
            right: 20px;
            text-align: right;
          }
          .complaint-body:hover{
            background-color: #D9F3D2;
             cursor: pointer;
          }
          .complaint-body-speak:hover{
            background-color: #D9F3D2;
             cursor: pointer;
          }
          .complaint-body-double:hover{
            background-color: #D9F3D2;
            cursor: pointer;
          }
        }
      }
    }
    .complaint-rigth {
      display: inline-block;
      height: 100%;
      width: 580px;

      .complaint-rigth-top{
        border: solid 1px #30CA04;
        border-radius: 25px;
        margin-bottom: 40px;
        position: relative;
        height: 212px;
        background-color: #FFFFFF;

        .report-num {
          position: absolute;
          top:0;
          right: 30px;
          font-family: $DFYuanW7-GBK;
          font-size: 16px;
          color: #666666;
          letter-spacing: 0;
          height: 60px;
          line-height: 45px;

          >span {
            color: $map-search-red-color;
          }
        }
      }
      .complaint-rigth-bottom{
        border: solid 1px #30CA04;
        border-radius: 25px;
        height: 150px;
        background-color: #FFFFFF;
      }

      .complaint-list{
        padding: 20px 20px;

        .complaint-list-p{
          font-family: $DFYuanW7-GBK;
          font-size: 18px;
          color: #292929;
          line-height: 20px;
          letter-spacing: 0;
          margin-bottom: 14px;
          cursor: default;

          & > span {
            display: inline-block;
            margin-right: 15px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          & > span:first-child{
            width: 25%;
          }
          & > span:nth-child(2){
            width: 15%;
          }
          & > span:last-child{
            width: 48%;
          }

        }
      }
    }
  }
}
.complaint-icon{
  text-align: center;
  font-family: $DFYuanW7-GBK;
  color: #292929;
  letter-spacing: 0;
  & > img {
    margin-top: 20px;
    width: 80px;
  }
  .icon-text{
    line-height: 20px;
    font-size: 16px;
    margin: 5px 0 10px 0;
  }
}
.complaint-icon:hover{
  cursor:pointer;
}

.handle_state{
  color: #49C42A;
}

// 竖版
.v-complaint-project-page {
  padding: 25px 14px 0;

  .complaint-info{
    width: 100%;
    margin-bottom: 30px;

    .complaint-left {
      position: relative;
      height: 600px;
      border: solid 1px #30CA04;
      border-radius: 25px;
      background-color: #FFFFFF;

      .complaint-table{
        padding: 0 15px;
      //  margin-top: 10px;

        .complaint-head,
        .complaint-head-double,
        .complaint-head-speak{
          & > span {
            padding: 20px 0 5px;
            font-size: 20px;
            line-height: 20px;
          }
        }

        .complaint-body,
        .complaint-body-double,
        .complaint-body-speak {
          & > span {
            padding: 14px 0;
            font-size: 18px;
            line-height: 18px;
          }
        }

        .complaint-body, .complaint-head{
          & > span {
            display: inline-block;
            margin-right: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          & > span:first-child{
            width: 50%;
          }
          & > span:nth-child(2){
            width: 30%;
          }
          & > span:last-child{
            width: 10%;
          }

        }

        .complaint-body-test{
          & > span{
            padding: 15px 0;

            &:first-child {
              padding: 0 0 15px;
            }
          }
          &:last-child{
            margin-bottom: 10px;
          }
        }

        .complaint-body-double, .complaint-head-double{
          & > span {
            display: inline-block;
            margin-right: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 18px;
            line-height: 18px;
            text-align: left;
          }

          & > span:first-child{
            width: 25%;
          }
          & > span:nth-child(2){
            width: 45%;
          }
          & > span:nth-child(3){
            width: 15%;
          }
          & > span:last-child{
            width: 10%;
          }
        }

        .complaint-body-speak, .complaint-head-speak{
          & > span {
            display: inline-block;
            margin-right: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 18px;
            line-height: 18px;
          }

          & > span:first-child{
            width: 70%;
            text-align: left;
          }
          & > span:last-child{
            width: 20%;
            text-align: right;
          }
        }

        .complaint-pagination{
          position: absolute;
          bottom: 10px;
          right: 20px;
          text-align: right;
        }
        .complaint-body:hover{
          background-color: #D9F3D2;
          cursor: pointer;
        }
        .complaint-body-speak:hover{
          background-color: #D9F3D2;
          cursor: pointer;
        }
        .complaint-body-double:hover{
          background-color: #D9F3D2;
          cursor: pointer;
        }
      }
    }
  }

  .complaint-rigth-top{
    border: solid 1px #30CA04;
    border-radius: 25px;
    margin-bottom: 30px;
    position: relative;
    height: 331px;
    background-color: #FFFFFF;

    .report-num {
      position: absolute;
      top:0;
      right: 30px;
      font-family: $DFYuanW7-GBK;
      font-size: 16px;
      color: #666666;
      letter-spacing: 0;
      height: 60px;
      line-height: 45px;

      >span {
        color: $map-search-red-color;
      }
    }
  }

  .complaint-rigth-bottom{
    border: solid 1px #30CA04;
    border-radius: 25px;
    height: 170px;
    background-color: #FFFFFF;
  }

  .complaint-list{
    padding: 20px 20px;

    .complaint-list-p{
      font-family: $DFYuanW7-GBK;
      font-size: 18px;
      color: #292929;
      line-height: 20px;
      letter-spacing: 0;
      margin-bottom: 14px;
      cursor: default;

      & > span {
        display: inline-block;
        margin-right: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      & > span:first-child{
        width: 25%;
      }
      & > span:nth-child(2){
        width: 15%;
      }
      & > span:last-child{
        width: 48%;
      }

    }
  }

  .complaint-icon{
    text-align: center;
    font-family: $DFYuanW7-GBK;
    color: #292929;
    letter-spacing: 0;
    & > img {
      margin-top: 20px;
      width: 100px;
    }
    .icon-text{
      line-height: 20px;
      font-size: 16px;
      margin: 5px 0 10px 0;
    }
  }
}
